
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>ORS Data Visualization</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script src='jsPdf/libs/Blob.js/Blob.js' type='text/javascript'></script>
  <script src='jsPdf/libs/FileSaver.js/FileSaver.js' type='text/javascript'></script>
  <script src='jsPdf/libs/png_support/zlib.js' type='text/javascript'></script>
  <script src='jsPdf/libs/png_support/png.js' type='text/javascript'></script>
  <script src='jsPdf/libs/deflate.js' type='text/javascript'></script>
  <script src='jsPdf/jspdf.js' type='text/javascript'></script>
  <script src='jsPdf/jspdf.plugin.addimage.js' type='text/javascript'></script>
  <script src='jsPdf/jspdf.plugin.png_support.js' type='text/javascript'></script>
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/chart.css" rel="stylesheet">
  <script src="js/bootstrap.min.js"></script>
  <script src="js/environmental.js"></script>
  <script src="js/ORSDBNavbar.js"></script>
</head>
<body>

<div class="ORSDBNavbar"></div>

<div class="container-fluid">
	 <b> &nbsp;Environmental Requirement :</b>
	 	<select id="envReq" class="input-small">
		<option value="0"> select a environmental requirement </option>
		<option value="1" >Wetness</option>
		<option value="2" >Extreme cold</option>
		<option value="3" >Extreme Heat</option>
		<option value="4" >Humid</option>
		<option value="5" >Weather</option>
		<option value="6" >Noise</option>
		<option value="7" >Chemicals</option>
		<option value="8" >Vibration</option>
		<option value="9" >Moving Parts</option>
		<option value="10" >Fumes</option>
		<option value="11" >Exposed Places</option>
	</select>
	  &nbsp;
	 	<button id="btnExport">Create PDF</button>
	<br>
	
	<div class="row no-gutters">
	<div class="col-md-6">
	<div class="panel panel-primary chart-panel">
    <div class="panel-heading">
    <span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span>
	<span class="pull-right clickable" style="padding-right:10px"><i class="glyphicon glyphicon-save"></i></span>
	<h2 class="panel-title" style="font-size: 14px">Incidence of Environment Exposure by Occupational Group</h2>
	</div>
	<br>
	<div>
	<b> &nbsp;&nbsp; Choose Incidence of Occurrence:</b> <select
					id="incidenceOfOccurance" class="input-small" autocomplete="off">
					<option value="0"></option>
					<option value="1">Not Present  (0%)</option>
					<option value="2">Almost never (0% - 25%)</option>
					<option value="3">Occasionally (25% - 50%)</option>
					<option value="4">Constantly   (50% - 75%)</option>
					<option value="5">Frequently   (75% - 100%)</option>
					<option value="6">Unknown</option>
				</select>
   </div>
			<div class="panel-body">
				<div id="env_BarChart_div" style="width: 650px; height: 350px;"></div>
			</div>
			</div>
		</div>
		
		
		<div id="table1" class="col-md-6" >
			<div class="panel panel-primary chart-panel">
				<div class="panel-heading">
<span id="tableSpan" class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span>
<span id="stackColumnChartPdf" class="pull-right clickable" style="padding-right:10px"><i class="glyphicon glyphicon-save"></i></span>
<span id="stacked" class="pull-right clickable" style="padding-right:20px"><i class="glyphicon glyphicon-stats"></i></span>
<h2 class="panel-title" style="font-size: 14px">Summary of Incidence of <span class="title"></span> by Occupational group</h2>
			</div>
			<div class="panel-body">
			<b>Percentage of employees working where <span class="title"></span> is required by occupational group</b>
			<br>
				<div id="env_table_div" style="width: 650px; height: 370px;"></div>
			</div>
		</div>
	</div>
</div>


<div class="row no-gutters">
	<div  class="col-md-6">
		<div class="panel panel-primary chart-panel">
			<div class="panel-heading">
				<span id="table2Span" class="pull-right clickable"><i
					class="glyphicon glyphicon-chevron-up"></i></span>
					<span id="overHeadTablePdf" class="pull-right clickable" style="padding-right:10px"><i class="glyphicon glyphicon-save"></i></span>
					
				<h2 class="panel-title" style="font-size: 14px"> Selected occupations requires <span class="title"></span> <span id="change"></span></h2>
			</div>
			<div class="panel-body">
			<div>
			<b>Please Choose here for Percentage Range </b> &nbsp; <select id="range" style="width: 250px" onchange="displayDataOnChangeOfCondition(this.value)" >
			<option value="3" >(50 % - 75 %)</option>
			<option value="1" >(0 % - 25 %)</option>
			<option value="2" >(25 % - 50 %)</option>
			<option value="4" >(75 % - 100 %)</option>
			</select>
			</div>
				<br>
		<div id="overheadTableData">
				<b>Selected occupations which requires <span class="title"></span> with in % range <span id="percentRange">(50% - 75%)</span></b>
					<br>
				<div id="env_overHead" style="width: 650px; height: 380px;"></div>
						</div>	
					</div>
				</div>
			</div>
			
			
			<div id="modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel"> Occupations <span id="change"></span> Requiring <span class="title"></span> </h4>
            </div>
            <div class="modal-body">
             <div id="Popup_BarChart_div" style="width: 350px; height: 450px;"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

		<div id="columnCharts" class="col-md-6">
				<div class="panel panel-primary chart-panel">
					<div class="panel-heading">
						<span id="columnChartsSpan" class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span>
					<span id="" class="pull-right clickable" style="padding-right:10px"><i class="glyphicon glyphicon-save"></i></span>
				<h2 class="panel-title" style="font-size: 14px" >
					Amount of <span class="title"></span> typically required by Occupation
				</h2>
			</div>
			<div class="panel-body">
            <div id="" style="width: 650px; height: 440px;"></div>			
			</div>
			</div>
			</div>
			</div>
			
</div>
</body>
</html>